<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>贪玩舔狗🐶</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
 
  <!-- <img class="hotdog" src="./img/hotdog.jpg" />
  <img class="guanjun" src="./img/guanjun.jpg" /> -->

  <img class="wsc" src="./img/wsc.jpg" alt="王思聪">
  
      
  <div class="play-panel">
    <div class="start"><span class="btn">❥开始游戏</span></div>
    <div class="stop">
      <div class="title">游戏结束</div>
      <div class="score">60分</div>
      <div class="btn">※重新开始※</div>
      
    </div>
  </div>
  
  <div class="game-score">
    <h1>剩余时间<span>60</span>秒</h1>
    <h1>+10分</h1>
  </div>
</body>
</html>
  <script>
   //调用的时候直接返回随机结果
   function random(max,min){
   return Math.floor(Math.random()*(max-min+1)+min) 
   }
   //1.设置王思聪最开始的位置：左下角
   //left是0
   //top是浏览器高度-王思聪自己的高度
   var wscObj =  document.querySelector('.wsc')
   var score = 0
   var wscX = 0
   var wscY = (window.innerHeight||document.documentElement.clientHeight) - wscObj.offsetHeight
   //2.让王思聪通过移动鼠标开始移动位置
   //  获取移动对象
   //  获取事件对象
   //  鼠标位置在王思聪中间，所以需要屏幕宽度-王思聪一半的宽度
   //  最大位置为浏览器宽度-王思聪自己大小
   //  大于的时候等于在最右边，距离左边最小的时候=0
   document.onmousemove=function(evt){
   var e=evt ||window.event
   var left=e.clientX-wscObj.offsetWidth/2
   var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - wscObj.offsetWidth
   if(left<0)left=0
   if(left>=maxLeft) left = maxLeft
   wscObj.style.left=left+"px"
   wscX = left
  }
   //3.定时器掉落食物
   //通过数字随机分别定义冠军和热狗，链接好图片
   setInterval(function() {
   var imgObj=document.createElement("img")
   var num=random(0,9)
   if([5,9].includes(num)){//num里面是5和9的时候为冠军
   imgObj.className="food guanjun"
   imgObj.src="./img/guanjun.jpg"
   imgObj.setAttribute("type","guanjun")//自定义type属性
   }else{//其他的是热狗
   imgObj.className = 'food hotdog'
   imgObj.src="./img/hotdog.jpg"
   imgObj.setAttribute("type","hotdog")
   }
   //4.定好食物的掉落起始位置最上面
   //最小是0 最大是屏幕宽度-自身宽度
   var min=0
   var max=(window.innerWidth || document.documentElement.clientWidth)-imgObj.offsetWidth
   imgObj.style.left=random(min,max)+"px"
   imgObj.style.top="0px"
   document.body.appendChild(imgObj)
   },1000)
   //5.定时+2的速度食物掉落，如果高度大于就清除，否则就定好位置
   setInterval(() =>{
   var foods = document.querySelectorAll('.food')
   foods.forEach(function(item, index){ 
   var top = parseInt(item.style.top) + 3//加的数字越大 掉落的越快
   var maxTop = (window.height || document.documentElement.clientHeight) - item.offsetHeight
   if (top >= maxTop) {
   document.body.removeChild(item)
   } else {
   item.style.top = top + 'px'
   }
   //6.食物的高度大于王思聪的高度并且宽度在王思聪的宽度范围内清除并且加分
   var foodX = parseInt(item.style.left)
   var foodY= parseInt(item.style.top) + item.offsetHeight
   if ( 
        (foodX+item.offsetWidth>=wscX && foodX<=(wscX+wscObj.offsetWidth))
        &&
        foodY>wscY
      ) {
        document.body.removeChild(item) 
   var type = item.getAttribute('type')
   type == 'guanjun' ? score+=5 : score++
   document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
   //7.创建个div放分数
   var  divObj = document.createElement('div')
        divObj.className = 'show-score'
        divObj.innerText = type == 'guanjun' ? '+5' : '+1' 
        divObj.style.left = wscX+wscObj.offsetWidth + 'px'
        document.body.appendChild(divObj)
        setTimeout(function(){ document.body.removeChild(divObj)}, 1000)
   }
   })
   })
   //结束时间
   var time = 60
   var game = setInterval(function() {
   time--
   var ScoreObj = document.querySelector('.game-score  span')
   if (time>=0) {
   ScoreObj.innerText = time
   }else {
   clearInterval(game)   
   //清除游戏倒计时          
   var payPanel = document.querySelector('.play-panel')
   var payPanelStop = payPanel.querySelector('.stop')
   payPanel.querySelector('.score').innerText = score+'分'
   payPanel.style.display =  payPanelStop.style.display = 'block'
   }
   }, 1000)
   //重新开始
   document.querySelector(".play-panel .stop .btn "). onclick=function(){
     score=0
     document.querySelector(".game-score h1:nth-of-type(2)").innerText=`+${score}分`
     var payPanel = document.querySelector('.play-panel')
     var payPanelStop = payPanel.querySelector('.stop')
     payPanel.style.display =  payPanelStop.style.display = 'none'

   }


</script>